<template>
  <div id="nav-side" :style="styleVar">
    <div class="side" :style="styleVar" v-for="(content, index) in contents">
      <p :style="isActive(index)" @click="change(index)">{{content}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavSide",
  props: {
    contents: {
      type: Array,
      default() {
        return ["编辑博客", "新增博客", "关于"]
      }
    },
    width: { /*侧边栏宽度*/
      type: Number,
      default() {
        return 200;
      }
    },
    fontSize: { /*文字大小*/
      type: Number,
      default() {
        return 14;
      }
    },
    fontColor: { /*文字颜色*/
      type: String,
      default() {
        return "white";
      }
    },
    backgroundColor: { /*背景颜色*/
      type: String,
      default() {
        return "#55585a";
      }
    },
    changeColor: { /*鼠标浏览时改变的颜色*/
      type: String,
      default() {
        return "#ff6700"
      }
    },
    active: { /*当前激活的下标*/
      type: Number,
      default() {
        return 0;
      }
    }
  },
  methods: {
    change(index) {
      this.$emit("change", index);
    },
    isActive(index) {
      if(index === this.active) {
        return "color: #faebd7";
      }
    }
  },
  computed: {
    /*定义CSS变量*/
    styleVar() {
      return {
        '--width': this.width + "px",
        '--height': (this.fontSize * 3) + 'px',
        '--fontSize': this.fontSize + "px",
        '--color': this.fontColor,
        '--backgroundColor': this.backgroundColor,
        '--changeColor': this.changeColor,
      }
    }
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  #nav-side {
    width: var(--width);
    background-color: var(--backgroundColor);
  }

  #nav-side .side {
    width: 100%;
    height: var(--height);
    /*字体样式*/
    color: var(--color);
    font-size: var(--fontSize);
    /*垂直居中*/
    line-height: var(--height);
  }

  #nav-side .side:hover {
    background-color: var(--changeColor);
    /*鼠标变形*/
    cursor: pointer;
  }

  #nav-side .side p {
    margin-left: 28px;
  }
</style>